import React from "react";
import "./index.less";

export function Menu(props){
    const { children, className = '', style = {} } = props;
    const cls = ['c-navigation'];
    if(className)
        cls.push(className);
    return <nav className="c-navigation" className={`${cls.join(' ')}`} style={style}>
            {children}
        </nav>
}

export function Item(props){
    const { children, onPress = null, className = '', style = {} } = props;
    const cls = ['c-navigation-item'];
    if(className)
        cls.push(className);
    const onClick = e => {
        e.preventDefault();
        onPress && onPress(e);
    }

    return <div href="#" onClick={onClick} className={`${cls.join(' ')}`} style={style}>
            {children}
        </div>
}

